<template>
  <el-container>
    <!-- <el-breadcrumb separator> -->
      <!-- <el-breadcrumb-item>菜单管理</el-breadcrumb-item> -->
    <!-- </el-breadcrumb> -->
    <el-main v-loading="loading">
    
      <div class="dataSearch">
          <el-button style="margin-top:20px" type="primary" @click="addMenuVisible" class="golable-sty-btn" >
      添加菜单
      </el-button>
        <el-input style="width:240px;position:absolute;right:20px;top:40px" v-model="name" @keyup.enter.native="search" clearable placeholder="请输入菜单名称">
          <i @click="search" style="color:#0090ff;font-size:14px" class="iconfont icon-sousuo" slot="suffix"></i>
        </el-input>
      </div>
      <el-table 
        :data="menuList" 
        style="background-color:#fff"
        class="mt-20" 
        height="calc(100vh - 200px)" 
        stripe>

        <el-table-column fixed prop="id" label="菜单ID" show-overflow-tooltip></el-table-column>
        <el-table-column prop="authoritySort" label="菜单顺序" show-overflow-tooltip></el-table-column>
        <el-table-column prop="authorityName" label="菜单名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="parentId" label="父菜单ID" show-overflow-tooltip></el-table-column>
        <el-table-column prop="authorityDescription" label="描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="authorityUrl" label="菜单URL" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="light" content="编辑" placement="top">
              <i style="color:#0090ff" @click="editHandel(scope.row)" class="iconfont icon-xiugaibianji"></i>
            </el-tooltip>&nbsp;&nbsp;  
            <el-tooltip class="item" effect="light" content="删除" placement="top">
              <i style="color:#0090ff" class="iconfont icon-shanchu" @click="deleteAuth(scope.row)"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <div class="clearfix enc-pagination" style="padding:10px">
        <el-pagination
          class="mr-btn"
          background
          @current-change="handleCurrentChange"
           @size-change="handleSizeChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="prev, pager, next, jumper,sizes,total">
        </el-pagination>
      </div>
    </el-footer>

    <!--添加菜单-->
    <add-menu v-if="dialogVisible" ref="addMenu" @callBack="addMenuCallBack"></add-menu>
  </el-container>
</template>

<script>
import addMenu from "@/views/menuManagement/addMenu";
import { findAllAuth, deleteAuth, deleteCheck } from "@/api/menuApi.js";
export default {
  components: {
    addMenu
  },
  data() {
    return {
      loading: false,
      searchName: "",
      dialogVisible: false,
      currentPage: 1,
      total: 0,
      pageSize: 10,
      menuList: [],
      name: ""
    };
  },
  watch: {},
  created() {
    this.findAllAuth();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.findAllAuth();
    },
    //查询所有菜单
    findAllAuth() {
      this.loading = true;
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        name: this.name.trim()
      };
      findAllAuth(params)
        .then(res => {
          this.loading = false;
          if (res.data.success) {
            this.total = res.data.data.total;
            if (res.data.data) {
              this.menuList = res.data.data.list;
            }
          }
        })
        .catch(err => {
          this.loading = false;
        });
    },
    //打开新增用户窗口
    addMenuVisible() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.addMenu.openDialogVisible();
      });
    },
    //编辑菜单
    editHandel(val) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.addMenu.openDialogVisible("edit", val);
      });
    },
    //搜索
    search() {
      this.currentPage = 1;
      this.findAllAuth();
    },
    //分页选择
    handleCurrentChange(val) {
      this.currentPage = val;
      this.findAllAuth();
    },
    deleteAuth(val) {
      //检查是否有子菜单
      let id = val.id;
      deleteCheck(id).then(res => {
        if (res.data.success) {
          if (res.data.data.childMenuNum != 0) {
            //有子菜单
            this.$confirm(
              "该菜单含有子菜单，是否删除它和它的子菜单？",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                cancelButtonClass: "el-button--primary",
                type: "warning"
              }
            ).then(() => {
              this.delMenu(id, res.data.data.code);
            });
          } else {
            //无子菜单
            this.$confirm("是否确定删除该菜单？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              cancelButtonClass: "el-button--primary",
              type: "warning"
            }).then(() => {
              this.delMenu(id, res.data.data.code);
            });
          }
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    //删除菜单
    delMenu(id, code) {
      deleteAuth(id, code).then(res => {
        if (res.data.success) {
          this.$message.success("删除成功");
          this.currentPage = 1;
          this.findAllAuth();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    addMenuCallBack() {
      this.dialogVisible = false;
      this.findAllAuth();
    }
  }
};
</script>

<style scoped lang="scss">
.search_btn .el-input--medium {
  width: 200px;
  vertical-align: middle;
}
.tittle-top{
  border:1px solid red;
}
.enc-pagination {
  float: right;

}
.dataSearch{
  line-height: 36px;
}
.mt-20{
  margin-top: 50px;
}
</style>>